<template>
    <div class="content">
        <div class="left">
            <el-button class="bts" :id="color ? '' : 'color'" @click="addcolor()">{{ '通知列表' }}</el-button>
            <el-button class="bts" :id="color ? 'color' : ''" @click="addcolor()">{{ '我的发布' }}</el-button>
        </div>
        <el-form inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="类型">
                <el-select v-model="formInline.region" placeholder="请选择">
                    <el-option v-for="(item, index) in store.informType.date" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="快速搜索">
                <el-input v-model="formInline.name" placeholder="请输入标题或发布者姓名" />
            </el-form-item>
            <el-form-item label="发送范围">
                <el-select v-model="formInline.range" placeholder="请选择">
                    <el-option v-for="item, index in ran" :label="item" :value="index" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button @click="empty">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="fication">
        <div class="top">
            <el-button type="primary" size="small" @click="to">
                <el-icon>
                    <Edit />
                </el-icon>
                &nbsp;
                发布通知
            </el-button>
        </div>
        <!-- 通知列表 -->
        <el-table v-if="!color" :data="informDatas" border style="width: 100%" stripe>
            <el-table-column label="序号" width="80" align="center">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="informType.name" label="类型" align="center" />
            <el-table-column prop="title" label="标题" align="center" />
            <el-table-column label="发送范围" align="center">
                <template #default="scope">
                    {{ ran[scope.row.range] }}
                </template>
            </el-table-column>
            <el-table-column label="发送者" align="center">
                <template #default="scope">
                    {{ scope.row.teacher.name }}
                </template>
            </el-table-column>
            <el-table-column prop="time" label="发布时间" align="center" />
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-row>
                        <el-tag size="small" color="white" type="success" @click="remove(scope.row.id)">
                            {{ '删除' }}
                        </el-tag>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
        <!-- 我的发布 -->
        <el-table v-if="color" :data="myinformDatas" border style="width: 100%" stripe>
            <el-table-column label="序号" width="80" align="center">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="informType.name" label="类型" align="center" />
            <el-table-column prop="title" label="标题" align="center" />
            <el-table-column label="发送范围" align="center">
                <template #default="scope">
                    {{ ran[scope.row.range] }}
                </template>
            </el-table-column>
            <el-table-column label="发布状态" align="center">
                <template #default="scope">
                    {{ priority[scope.row.priority] }}
                </template>
            </el-table-column>
            <el-table-column prop="time" label="发布时间" align="center" />
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-row>
                        <el-tag size="small" color="white" type="success" @click="remove(scope.row.id)">
                            {{ '删除' }}
                        </el-tag>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="jump">
        <el-pagination layout="prev, pager, next" background :total="page * 10" @current-change="handleCurrentChange" />
        <span>{{ `共&nbsp;&nbsp;${page}&nbsp;&nbsp;页` }}</span>
        <span>跳至</span>
        <el-input v-model="input" />
        <span>页</span>
        <el-button @click="jump">确定</el-button>
        <el-select v-model="select" placeholder="6页/条 " style="width: 115px">
            <el-option label="5页/条" value="5" @click="fn" />
            <el-option label="7页/条" value="7" @click="fn" />
            <el-option label="8页/条" value="8" @click="fn" />
        </el-select>
    </div>
</template>
<script  setup lang="ts">
import service from '@/api'

import router from '@/router'
import { ref, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import { useInformType } from '@/stores/editNotification'
import { useUseinfoStore } from '@/stores/useinfo'
const store: any = useInformType()
const storeinfo: any = ref({})
const informDatas: any = ref([])
const myinformDatas: any = ref([])
const cp = ref('1')
const ps = ref('6')
const color: any = ref(false)
const myinform = ref(1002)
const select: any = ref("")
const priority: any = ref({
    1: "低级通知",
    2: "高级通知",
    3: "紧急通知"
})
//总共多少页
const page: any = ref('')
const input = ref('')
const ran: any = ref({
    0: '全班',
    1: '一年级',
    2: '二年级',
    3: '三年级',
    4: '四年级',
    5: '五年级',
    6: '六年级',
})
//查询相关变量
const formInline = ref({
    name: '',
    region: '',
    range: ''
})
const onSubmit = async () => {
    if (color.vlaue) {
        // console.log('wo');
    } else {
        if (formInline.value.region && formInline.value.name && formInline.value.range) {
            let res = await service.inform.getInformByPage({ cp: cp.value, ps: 7777 })
            let data = res.data.data.date.filter((item: { informType: { id: string; }; }) => item.informType.id == formInline.value.region)
            let array: any = []
            data.forEach((item: { title: string | string[]; }) => {
                if (item.title.includes(formInline.value.name) == true) {
                    array.push(item)
                }
                if (item.title.includes(formInline.value.name) == false) {
                    ElNotification.success({ message: '换个关键词试试' });
                    informDatas.value = []
                    return
                }
            });
            array = array.filter((item: { informType: { id: string; }; }) => item.informType.id == formInline.value.region)
            informDatas.value = array
            formInline.value.range = ''
            formInline.value.region = ''
            formInline.value.name = ''
            return
        }
        if (formInline.value.region && formInline.value.range) {
            let res = await service.inform.getInformByPage({ cp: cp.value, ps: 7777 })
            let data = res.data.data.date.filter((item: { informType: { id: string; }; }) => item.informType.id == formInline.value.region)
            informDatas.value = data.filter((item: { range: string; }) => item.range == formInline.value.range)
            formInline.value.range = ''
            formInline.value.region = ''
            return
        }
        if (formInline.value.region) {
            let res = await service.inform.getInformByPage({ cp: cp.value, ps: 7777 })
            informDatas.value = res.data.data.date.filter((item: { informType: { id: string; }; }) => item.informType.id == formInline.value.region);
            formInline.value.region = ''
        }
    }

}
function empty() {
    formInline.value = {
        name: '',
        region: '',
        range: ''
    }
}
//渲染通知列表数据
onMounted(async () => {
    reduce()
    let types = await service.informType.getInformTypeByPage()
    //存类型数据
    store.save_informType(types.data.data);
    storeinfo.value = store.informType
    // 获取教师id
    myinform.value = useUseinfoStore().useinfo.teacher.tId
})
//跳转
function to() {
    router.push('/editnotification')
}
//删除
async function remove(id: any) {
    let res = await service.inform.deleteInform(id)
    if (res.data.code == 200) {
        ElNotification.success({ message: '删除成功' });
        informDatas.value = informDatas.value.filter((item: any) => item.id != id)
    } else {
        ElNotification.success({ message: '删除失败,请稍后再试' });
    }

}
//改变颜色并渲染数据
async function addcolor() {
    color.value = !color.value
    if (color.value) {
        // 我的发布请求
        let res = await service.inform.getInformByPage({ cp: cp.value, ps: '777' })
        if (res.data.code == 200) {
            myinformDatas.value = res.data.data.date.filter((item: { tId: number; }) => item.tId == myinform.value)
            page.value = 1
            select.value = ""
            input.value = ""
        }
    } else {
        let res = await service.inform.getInformByPage({ cp: cp.value, ps: ps.value })
        if (res.data.code == 200) {
            informDatas.value = res.data.data.date
            page.value = res.data.data.page.pages
            select.value = ""
            input.value = ""
        }
    }

}
//切换页数
const handleCurrentChange = (val: any) => {
    cp.value = val
    reduce()
}
//一页多少条数据
function fn() {
    ps.value = select.value
    reduce()
}
//自定义跳转页数
function jump() {
    cp.value = input.value
    reduce()

}
//封装请求数据
let reduce = async () => {
    let res = await service.inform.getInformByPage({ cp: cp.value, ps: ps.value })
    // console.log(res.data);
    if (res.data.code == 200) {
        informDatas.value = res.data.data.date
        page.value = res.data.data.page.pages
    }
}
</script>
<style lang="scss" scoped>
#color {
    background-color: white;
}

.content {
    .bts {
        border-radius: 0;
        border: none;
        background-color: rgb(247, 247, 247);
    }

    .left {
        .el-button+.el-button {
            margin-left: 0;
        }
    }

    .el-form {
        display: flex;
        background-color: white;
        height: 70px;
        align-items: center;
        padding-left: 30px;

        .el-form-item {
            margin-bottom: 0;
        }
    }
}

.fication {
    .top {
        display: flex;
        justify-content: flex-end;
        margin: 10px;
    }
}

.el-tag {
    border: none;
    cursor: pointer;
}

.el-row {
    justify-content: center;
}

.jump {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    font-size: 12px;

    .el-input {
        width: 30px;
        height: 30px;
        padding: 0;
    }

    span,
    .el-select {
        margin: 0px 10px;
    }
}
</style>